<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="text">
    <p></p>
    
    <script>
        /*
            M： 数据
            V： 界面

            以前要实现：界面变了，数据立刻跟着变
        */
       let msg = ''
       // 找到输入框
       let input = document.querySelector('input')
       let p = document.querySelector('p')

       // 需要输入框一变，数据就跟着变
       input.oninput = function () {

          msg = this.value
          p.innerHTML = msg
       }

       // 总结发现：原生开发里，我们需要大量写操作dom的代码
       // 例如找到dom、监听dom事件、拿到dom值、赋值给另外一个dom
    </script>
</body>
</html>